<template>
  <div class="k-resume-modal" v-if="showModal">
    <span class="ksd-resume-close" @click="handleClose"><i class="iconfont icon-shanchu4"></i></span>
    <div style="height:100vh;overflow: auto;position: relative;z-index: 200;background: #fff">
      <div class="operation-item gui-paddingn flex justify-between">
        <div class="c333 fw">
          当前操作的是：{{itemObj.title}}，ID是:{{itemObj.id}}
        </div>
        <div>
          <input class="binput mr10" type="text" placeholder="请输入标题" @blur="handleSearchCategory"  v-model="queryParams.keyword"/>
          <select class="binput mr10" v-model="queryParams.channelId" @change="handleSearchCategory" >
            <option :value="0">--请选择栏目--</option>
            <option v-for="item in channelList" :value="item.id">{{item.title}}</option>
          </select>
          <select class="binput" v-model="queryParams.categoryId" @change="handleSearchCategory">
            <option :value="0">--请选择分类--</option>
            <option v-for="item in categoryList" :value="item.id">{{item.title}}</option>
          </select>
        </div>
      </div>
      <div class="gui-padding">
        <div>
          <table class="k-data-table-table w100" style="table-layout: auto;">
            <thead class="n-data-table-thead">
            <tr class="n-data-table-tr">
              <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">编号</div>
                </div>
              </th>
              <th>
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">标题</div>
                </div>
              </th>
              <th>
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">栏目</div>
                </div>
              </th>
              <th>
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">分类</div>
                </div>
              </th>
              <th>
                <div class="n-data-table-th__title-wrapper">
                  <div class="n-data-table-th__title">操作</div>
                </div>
              </th>
            </tr>
            </thead>
            <tbody class="n-data-table-tbody">
            <template v-for="(item,index) in noteList">
              <tr class="n-data-table-tr">
                <td> {{ item.id }}</td>
                <td class="flex align-items">
                  {{ item.title|| "暂无" }}
                </td>
                <td>
                  {{ item.channelName || "暂无" }}
                </td>
                <td>{{ item.categoryName || "暂无" }}
                </td>
                <td colspan="1" rowspan="1" data-col-key="operator"
                    class="n-data-table-td n-data-table-td--last-col n-data-table-td--last-row">
                  <div class="flex align-center">
                    <a @click.prevent="handleBindDialog(item)"  class="mr5 green pointer">绑定课程
                    </a>
                  </div>
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="20">
                <k-empty :show="total == 0"></k-empty>
                <div @click="handleLoadMore" v-if="total > queryParams.pageSize && queryParams.pageNo < pages"
                     class="flex justify-center pointer">加载更多({{ total || 0 }})
                </div>
                <div v-if="total > queryParams.pageSize && queryParams.pageNo == pages"
                     class="flex justify-center c999 mt20 mb20">没有更多了
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="k-resume-diaolog"></div>
  </div>
</template>
<script setup>
const itemObj = ref({})
const showModal = ref(false)
const total = ref(0)
const pages = ref(0)
const loadingFlag = ref(false)
const noteList = ref([])
const channelList = ref([])
const categoryList = ref([])
const queryParams = reactive({
  channelId: 0,
  categoryId: 0,
  keyword: "",
  notetype: 0,  // 基础课 2进阶课 3 实战小册 4 面试课
  pageNo: 1,
  pageSize: 20,
  orderNum: 0 // 0 最新  1 最热 2 最后更新
})
const userDialogRef = ref({})
const emits = defineEmits(["success"])

const handleBindDialog = (item)=>{
  emits("success",item,itemObj.value)
}

const handleSearchCategory = async () => {
  queryParams.pageNo = 1
  noteList.value = []
  handleLoadData()
}

const handleLoadData = async () => {
  loadingFlag.value = true
  const resp = await useLoadAdminNoteListApi(queryParams)
  noteList.value = noteList.value.concat(resp.data.records)
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
}

const handleLoadMore = () => {
  queryParams.pageNo++
  handleLoadData()
}

const handleLoadCategories = async () => {
  const resp = await useLoadNoteCategoriesAllApi()
  categoryList.value = resp.data
}


const handleLoadChannel = async () => {
  const resp = await useLoadChannelList()
  channelList.value = resp.data
}


const handleOpen = (item,type) => {
  showModal.value = true
  itemObj.value = item
  handleLoadCategories()
  handleLoadChannel()
  handleLoadData()
}

const handleClose = () => {
  showModal.value = false
  itemObj.value = {}
  queryParams.pageNo = 1
  noteList.value = []
}

defineExpose({
  handleOpen
})

definePageMeta({
  middleware: ["md-admin"],
  layout: "nindex",
})
</script>
<style scoped lang="scss">
._land_23vdq_1 {
  display: flex;
  justify-content: center;
  width: 100%;
}


._land-container_23vdq_7 {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 80px 8%;
  max-width: 1280px;
  padding: 40px 40px 30px
}

._land-img_23vdq_14 {
  grid-column: span 7;
  max-width: 100%;
  object-fit: contain
}


._land-text_23vdq_11 {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  align-items: flex-start;
  justify-content: center
}

._land-text_23vdq_11 > section {
  font-weight: bold;
  font-size: 28px;
  color: var(--text-color-primary, var(--text-color-primary, #222529))
}

._land-text_23vdq_11 > ul {
  padding: 0;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 48px;
  margin-left: 20px;
  line-height: 200%;
  list-style: disc;
  color: #666;
  font-size: 16px;
}

.gda-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
}

.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
}

.gda-btn > i, .gda-btn > span {
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

.k-data-table-table th {
  background: #fafafc;
}

.k-data-table-table td,
.k-data-table-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(239, 239, 245, 1);
}

.k-resume-diaolog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
}

.ksd-resume-close {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 1000;
  cursor: pointer;
}

.k-resume-modal {
  color: #333;
  border-radius: 8px;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: #fff;
  position: fixed;
  margin: 0 auto;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .bannerbox {
    width: 50%;
  }
}
</style>